<!-- 
	报价表 item 
-->
<template>
    <view class="quotation-item">
        <view class="quotation-item-top" @click="goDetail">
            <text class="pro-number">货号：{{ item.SkuCode }}</text>
            <text class="pro-status" :class="{ 'offline-text': item.SaleStatus == 2 }">{{
                item.SaleStatus == 2 ? "已下架" : "上架中"
            }}</text>
        </view>
        <view class="quotation-item-main" @click="goDetail">
            <image mode="aspectFill" class="pro-image" :src="easyGetImgUrl(item.ProductImage)"></image>
            <view class="pro-info">
                <text class="pro-title">{{ item.ProductName }}</text>
                <text class="pro-desc" v-if="item.Attribute">规格：{{ item.Attribute }}</text>
                <view class="pro-price">
                    <text class="price-text">￥{{ item.Price }}</text>
                    <text class="small-text">/{{ item.UnitName }}</text>
                </view>
            </view>
        </view>
        <view class="quotation-item-bottom">
            <text class="quotation-time">报价时间：{{ item.AddTime }}</text>
            <button class="btn btn-main btn-quotation" @click.stop="quotationFn()">报价</button>
        </view>
        <uni-popup ref="quotationPop" type="center" :animation="false" :safe-area="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>报价</text>
                </view>
                <view class="input-box">
                    <input
                        auto-focus
                        placeholder="请填写新报价"
                        confirm-type="search"
                        type="digit"
                        v-model="price"
                        class="btn-input" />
                    <text class="price-unit">元</text>
                </view>

                <view class="pop-action">
                    <view @click="cancelFn">取消</view>
                    <view @click="confirmFn">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
import { SaveOfferSkuPrices } from "@/pages_supplier/service/api/supplier.js"
export default {
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            price: "",
        }
    },
    mounted() {},
    methods: {
        quotationFn() {
            this.$refs.quotationPop.open()
        },
        cancelFn() {
            this.$refs.quotationPop.close()
        },
        confirmFn() {
            this.cancelFn()

            this.doQuotation()
        },
        //提交报价
        doQuotation() {
            if (this.price.trim() == "") {
                this.easyToast("请输入报价")
                return
            }
            let price = Number(this.price)
            if (price <= 0) {
                this.easyToast("请输入正确的报价")
                return
            }
            let param = {
                productId: this.item.ProductId,
                skuId: this.item.SkuId,
                unitId: this.item.UnitId,
                price: price,
                supplierId: this.item.SupplierId,
                ratio: this.item.Ratio,
                unitName: this.item.UnitName,
                productCode: this.item.ProductCode,
                skuCode: this.item.SkuCode,
                attribute: this.item.Attribute ? this.item.Attribute : "",
                productName: this.item.ProductName,
                productImage: this.item.ProductImage ? this.item.ProductImage : "",
            }
            SaveOfferSkuPrices(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("报价成功")
                    this.price = ""
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        goDetail() {
            this.easyGoTo("/pages_supplier/packet/quotation/detail?id=" + this.item.ProductId)
        },
    },
}
</script>

<style lang="scss">
.quotation-item {
    padding: $app-page-padding;
    background: #ffffff;
    border-radius: 12rpx;
    margin: $app-page-padding $app-page-padding 0;
    .quotation-item-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .pro-number {
            color: #0091ff;
            font-size: $font-size-28;
        }
        .pro-status {
            color: $app-color-main;
            font-size: $font-size-26;
        }
        .offline-text {
            color: #999999;
        }
    }
    .quotation-item-main {
        display: flex;
        flex-direction: row;
        .pro-image {
            width: 160rpx;
            height: 160rpx;
            border-radius: 8rpx;
            margin-right: $app-page-padding;
        }
    }
    .quotation-item-bottom {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        .quotation-time {
            flex: 1;
        }
        .btn-quotation {
            width: 160rpx;
            height: 64rpx;
            font-weight: normal;
            font-size: $font-size-28;
        }
    }
}
.pro-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .pro-title {
        font-size: $font-size-30;
        margin-bottom: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }
    .pro-desc {
        color: $app-color-text-tip;
        margin-bottom: 10rpx;
    }
    .pro-price {
        display: flex;
        flex-direction: row;
        align-items: center;
        .small-text {
            color: $app-color-text-main;
        }
        .price-text {
            font-size: $font-size-36;
            margin-right: 10rpx;
            font-weight: bold;
            color: $app-color-text-main;
        }
        .del-text {
            color: #999999;
        }
    }
}
</style>
